<template>
    <view class="news">
		<image @click="fabuFn" class="jia" src="../../static/images/index/jia.png" mode=""></image>
		<view class="bg-class">
			<image class="bg" src="../../static/images/index/bg.png" mode="widthFix"></image>
		</view>
		<view v-for="(item, index) in state.pages" :key="index">
		    <!-- <template v-if="item.name == 'search'">
		        <w-search :content="item.content" :styles="item.styles" />
		    </template> -->
		    <template v-if="item.name == 'banner'">
		        <w-banner class="swiper1" :content="item.content" :styles="item.styles" />
		    </template>
		  <!--  <template v-if="item.name == 'nav'">
		        <w-nav :content="item.content" :styles="item.styles" />
		    </template> -->
		</view>
        <!-- 搜索 -->
        <!-- <navigator class="input" url="/pages/search/search"> -->
		<view class="input">
			<!-- <u-search placeholder="请输入关键词搜索" :show-action="false" bg-color=" rgba(255,255,255,0.1)"></u-search> -->
			<u-search placeholder="请输入采购关键词搜索" :show-action="true" bg-color=" rgba(255,255,255,0.1)" v-model="searchtext" @custom="customFn"></u-search>
		</view>

		    <view class="list-class">
		    	<block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
		    	    <!-- <news-card :item="newsItem" :newsId="newsItem.id" :userId="newsItem.user_id"></news-card> -->
					<view class="" @click="tiaoz(newsItem.id)">
					    <view class="news-card  bg-white1 px-[20rpx] py-[32rpx]">
							<view class="news-card-top">
								<view class="">
									<!-- <image class="tou" src="../../static/images/tuo.png" mode=""></image> -->
									<image class="tou" src="../../static/images/na.png" mode="" v-if="newsItem.type==1&&newsItem.pada?.leixing==1"></image>
									<image class="tou" src="../../static/images/qi.png" mode="" v-if="newsItem.type==1&&newsItem.pada?.leixing==0"></image>
									<image  class="tou" src="../../static/images/index/ge.png" v-if="newsItem.type==0"></image>
									<image  class="tou" :src="newsItem.pada?.avatar" v-if="newsItem.type==0"></image>
									<!-- <image class="tou" :src="newsItem.qiye.qyimg" mode=""></image> -->
								</view>
								<view class="qiyeming" v-if="newsItem.type==1">
									{{newsItem.pada?.name}}
								</view>
								<view class="qiyeming" v-if="newsItem.type==0">
									{{newsItem.pada?.nickname}}
								</view>
							</view>
					       
						<view class="flex news-card-conter">
							<view class="mr-[20rpx]" v-if="newsItem.fming">
							    <u-image :src="newsItem.fming" width="220" height="200"></u-image>
							</view>
							<view style="width: 65%;">
								<view class="card-titel">{{ newsItem.name }}</view>
								<view class="gui">
									<view class="gui-item">
										规格：
									</view>
									<view class="huanhang">
										{{newsItem.specifications}}
									</view>
								</view>
								<view class="gui">
									<view class="gui-item1">
										交货地：
									</view>
									<view class="huanhang">
										{{newsItem.producer}}
									</view>
								</view>
								<view class="phone">
									<view class="">
										联系方式：
									</view>
									<view class="">
										{{newsItem.contacts[0].tel}}
									</view>
								</view>
							</view>
						</view>
					    </view>
						</view>
					<!-- </navigator> -->
		    	</block>
		    </view>
		<!-- </z-paging> -->
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getArticleCate,getcaiList } from '@/api/news'
import { getIndex } from '@/api/shop'
	import { useUserStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
const state = reactive<{
    pages: any[]
    article: any[]
}>({
    pages: [],
    article: []
})
const searchtext=ref('')
const tabList = ref<any>([])
const current = ref<number>(0)
const getData1 = async () => {
    const data = await getIndex()
    state.pages = JSON.parse(data?.page?.data)
    state.article = data.article
}

getData1()
const handleChange = (index: number) => {
    console.log(index)
    current.value = Number(index)
}

const getData = async () => {
    const data = await getArticleCate()
    tabList.value = [{ name: '全部', id: '' }].concat(data)
}
const tiaoz=(id:any)=>{
	// console.log();
	// if(isLogin.value){
		uni.navigateTo({
			url:'/pages/news_detail/news_detail?id='+id
		})
		console.log('111');
	// }else{
	// 	uni.navigateTo({
	// 		url:"/pages/login/login"
	// 	})
	// }

}
onLoad((options) => {
    // getData()
	queryList()
})
const dataList=ref([])
const queryList = async () => {
    try {
        const { data } = await getcaiList({
          name:''
        })
		// console.log(lists,'lists1111111111111111111');
        // paging.value.complete(lists)
		dataList.value=data
		dataList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		dataList.value.forEach(item=>{
			if(item.contacts.length!=0){
				item.contacts[0].tel=mobile(item.contacts[0].tel)
			}
			// item.contacts[0].tel=mobile(item.contacts[0].tel)
			// console.log(item);
		})
		
    } catch (e) {
        console.log('报错=>', e)
    }
}
const mobile=(data)=>{
	return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
const fabuFn=()=>{
	if(isLogin.value){
		uni.navigateTo({
			url:'/pages/user/publishprocurement'
		})
	}else{
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}

}


const customFn=async()=>{
	console.log('搜索');
	console.log(searchtext.value,'searchtext');
	try {
	    const { data } = await getcaiList({
	      name:searchtext.value
	    })
		// console.log(lists,'lists1111111111111111111');
	    // paging.value.complete(lists)
		dataList.value=data
		dataList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		dataList.value.forEach(item=>{
			if(item.contacts.length!=0){
				item.contacts[0].tel=mobile(item.contacts[0].tel)
			}
			// item.contacts[0].tel=mobile(item.contacts[0].tel)
			// console.log(item);
		})
		
	} catch (e) {
	    console.log('报错=>', e)
	}
}
</script>

<style lang="scss" scoped>
	.gui-item1{
		width: 23%;
		
	}
	.gui-item{
			width: 17%;
		}
		.huanhang{
			flex: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	.news {
		position: relative;
		.jia{
			width: 98rpx;
			height: 98rpx;
			position: fixed;
			bottom: 292rpx;
			right: 18rpx;
			z-index: 2;
		}
	    &-search {
	        margin-bottom: 2rpx;
	    }
	
	    &-list {
	        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
	    }
	}
	.bg-class{
		width: 100%;
		.bg{
			width: 100%;
		}
	}
	.swiper1{
		position: absolute;
		top: 150rpx;
		// margin-left: 5%;
		// width: 90%;
		width: 100%;
		// height: 400rpx;
		// margin-bottom: 28rpx;
	}
	.input{
		position: absolute;
		top: 50rpx;
		width: 94%;
		margin-left: 3%;
		background: rgba(255,255,255,0.1);
		
	height: 72rpx;
	border: 3rpx solid #06BE7C;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-class{
		width: 94%;
		margin-left: 3%;
		margin-top: 150rpx;
	}
	.news-card {
	    // border-bottom: 1px solid #f8f8f8;
		margin-bottom: 20rpx;
		
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	    &-content {
	        &-title {
	            -webkit-line-clamp: 2;
	            overflow: hidden;
	            word-break: break-all;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-box-orient: vertical;
	        }
	        &-intro {
	            -webkit-line-clamp: 1;
	            overflow: hidden;
	            word-break: break-all;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            -webkit-box-orient: vertical;
	        }
	    }
	}
	.card-titel{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.gui{
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin-top: 22rpx;
	}
	
	.phone{
		margin-top: 22rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.bg-white1{
		background-color: #fff;
	}
	.news-card-top{
		display: flex;
		height: 56rpx;
		line-height: 56rpx;
		padding-bottom: 16rpx;
		box-sizing: content-box;
		border-bottom: 2rpx solid #EEE;
		position: relative;
		.qiyeming{
			padding-left: 10rpx;
		}
		.tou{
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}
		.zhiding1{
			position: absolute;
			right: -18rpx;
			bottom:0;
			.zhiding{
				width: 134rpx;
				height: 52rpx;
			}
		}
		
	}
	.news-card-conter{
		margin-top: 16rpx;
	}
	.news-card-bottom{
		margin-top: 16rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 36rpx;
		padding: 20rpx;
	}
// .news {
// 	position: relative;
// 		.jia{
// 			width: 98rpx;
// 			height: 98rpx;
// 			position: fixed;
// 			bottom: 292rpx;
// 			right: 18rpx;
// 			z-index: 2;
// 		}
//     &-search {
//         margin-bottom: 2rpx;
//     }

//     &-list {
//         height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
//     }
// }
// .bg-class{
// 	width: 100%;
// 	.bg{
// 		width: 100%;
// 	}
// }
// .swiper1{
// 	position: absolute;
// 	top: 150rpx;
// 	// margin-left: 5%;
// 	// width: 90%;
// 	width: 100%;
// 	// height: 400rpx;
// 	// margin-bottom: 28rpx;
// }
// .input{
// 	position: absolute;
// 	top: 50rpx;
// 	width: 94%;
// 	margin-left: 3%;
// 	background: rgba(255,255,255,0.1);
	
// height: 72rpx;
// border: 3rpx solid #06BE7C;
// border-radius: 16rpx 16rpx 16rpx 16rpx;
// }
// .list-class{
// 	width: 94%;
// 	margin-left: 3%;
// 	margin-top: 150rpx;
// }
</style>
